<template>
	<!-- @touchmove.stop.prevent -->
	<view class="subscribe_layout">
		<view class="tabs">
			<v-tabs v-model="current" :tabs='tablist' :scroll="false" :line-scale="0.1"  bg-color="f5f5f5"
				@change="changeTab" active-color="#53786C" lineColor="#53786C" line-height="2px" fontSize = "30rpx" />
		</view>
		<view class="container-tabs-list">
			<swiper class="container-tabs__swiper" :current="current" @animationfinish="animationFinished">
				<swiper-item class="swiper-item" style="height: 100%;">
					<scroll-view scroll-y style="height: 100%" @scrolltolower="getData">
						<view class="content">
							<subscribed-goods-item class="goods-item" v-for="(item,index) in dataList" :key="item.id"
								:item='item' :class="index==navIndex ?'active':''" @click="clickItem(index,item)"
								@childShowDetail="showDetailInfoPop"> </subscribed-goods-item>
						</view>
					</scroll-view>
				</swiper-item>

				<swiper-item class="swiper-item">
					<scroll-view scroll-y style="height: 100%" @scrolltolower="getData">
						<my-subscribed class="my-subscribed" :message = "imei">

						</my-subscribed>

					</scroll-view>
				</swiper-item>

			</swiper>
		</view>
		<view class="bottom" v-if="showPayBottom">
			<view class="bottom-left">
				<view class="total-title">{{$t('subscribed.total')}}</view>
				<view class="total-money">
					{{totalMoney}}
				</view>
			</view>
			<view class="bottom-right" @click="toBuyGoods()">
				{{$t('subscribed.ensurePay')}}
			</view>
		</view>
		<uni-popup ref="goodsItemInfoPopup" type="bottom">
			<view class="goodsItemInfoPopup">
				<view class="title">
					{{showDetailItem.name}}
				</view>
				<view class="des">
					<rich-text :nodes="showDetailItem.detail"></rich-text>
				</view>
				<view class="buy" @click="toBuyGoods(item)">
					{{$t('subscribed.buy')}}
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="payGoodsPopup" type="bottom">
			<pay-goods-pop class="payGoodsPopup" :item="showDetailItem" @payForGoodsBill="toPayForBill">

			</pay-goods-pop>
		</uni-popup>
	</view>
</template>

<script setup>
	import {
		onLoad
	} from "@dcloudio/uni-app"
	import {
		apiGetSubscribeGoodsList
	} from "../../api/device_api";
	import {
		apiUserGetId,
		apiUserPayOrder,
		apiUserSubmitOrder
	} from "../../api/user_api";
	import {
		ref
	} from "vue";
	import { i18nTool } from '../../utils/i18en';
import { getImei } from "../../utils/user_tools";
	var tablist = ref([i18nTool('subscribed.packageList'), i18nTool('subscribed.myScribed')])
	var current = ref(0)
	var navIndex = ref(null)
	var dataList = ref([]);
	var totalMoney = ref(0);
	var showDetailItem = ref(null);
	var goodsItemInfoPopup = ref(null);
	var payGoodsPopup = ref(null);
	var showPayBottom = ref(true);
	var orderId = ref(null);
	var imei;
	onLoad((e) => {
		
		uni.setNavigationBarTitle({
			title:i18nTool('subscribed.navTitle') 
		})
		let{data} = e;
		let datavalue = data;
		if(datavalue){
			imei = datavalue;
		}else{
			imei = getImei();
		}
		
		getGoodsList();
	})

	//当前商品说明
	const showDetailInfoPop = (item) => {
		showDetailItem.value = item;
		goodsItemInfoPopup.value.open();
	}

	//获取商品列表
	const getGoodsList = async () => {

		let res = await apiGetSubscribeGoodsList({
			imei: imei
		});
		dataList.value = res.content;
	}

	const changeTab = (e) => {
		showPayBottom.value = e == 0 ? true : false;
		current.value = e;
	}
	const animationFinished = (e) => {
		showPayBottom.value = e.detail.current == 0 ? true : false;
		current.value = e.detail.current
	}

	//选择当前商品
	const clickItem = (index, item) => {
		navIndex.value = index;
		totalMoney.value = item.price;
	}

	//下单
	const toBuyGoods = () => {

		if (totalMoney.value == 0) {
			uni.showToast({
				title: i18nTool('subscribed.errMsg'),
				icon: "none",
			})
			return
		}
		goodsItemInfoPopup.value.close();
		showDetailItem.value = dataList.value[navIndex.value];
		payGoodsPopup.value.open();
		getOrderId();
	}
	//支付
	const toPayForBill = async (e) => {
		uni.showLoading({
			title:"loading...",
		})
		payGoodsPopup.value.close();
		toPayTellService();
	
	}

	//告诉后台下单
	const toPayTellService = async () => {
		uni.showLoading({
			title:"loading...",
		})
		let param = {
			goodsId: showDetailItem.value.id,
			imei: imei,
			orderId: orderId.value,
		}
		let res = await apiUserSubmitOrder(param);
			
		if(res.status == 0){
			toStripePayService();
		}
	}
	//告诉Stripe下单
	const toStripePayService = async () => {
		let param = {
			orderId: orderId.value,
		}
		let res = await apiUserPayOrder(param);
		console.log("res1==",res);
		toPayBillPage(res.content);
	}
	
	//跳转支付页面
	const toPayBillPage = (url) => {
		uni.navigateTo({
			url: '/pages/subscribe/subscribe_pay?url=' +url+'&imei='+imei
		})
	}

	//获取订单 id
	const getOrderId = async () => {
		let res = await apiUserGetId({
			type: 2
		});
		orderId.value = res.content;
	}
</script>

<style lang="scss" scoped>
	.subscribe_layout {
		background-color: #f3f3f3;
		box-sizing: border-box;
		padding-top: 100rpx;
		height: 100vh;

		.tabs {
			position: fixed;
			top: 0;
			left: 0;
			display: flex;
			align-items: center;
			width: 100%;
			height: 100rpx;
			box-sizing: border-box;
			background-color: #fff;
			box-shadow: 0px 0px 10rpx rgba(0, 0, 0, 0.1);
			// border-radius: 0px 0px 10rpx 10rpx;
			z-index: 3;
		}

		.container-tabs-list {
			height: calc(100vh - 100rpx);

			.container-tabs__swiper {
				height: 100%;

				.content {
					padding-bottom: 150rpx;

					.goods-item {
						&.active {
							color: #fff;
							background: #0D3846;

							:deep() {
								.uni-icons {
									color: #fff !important;
								}
							}
						}
					}
				}

				.my-subscribed {}

			}
		}

		.bottom {
			height: 100rpx;
			width: 100%;
			background-color: #fff;
			bottom: 0;
			position: fixed;
			z-index: 4;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.bottom-left {
				padding-left: 30rpx;
				display: flex;
				justify-content: start;
				align-items: center;
			}

			.bottom-right {
				height: 100rpx;
				width: 200rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: #0D3846;
				color: #fff;
			}
		}

		.goodsItemInfoPopup {
			height: 600rpx;
			background-color: #fff;
			border-top-right-radius: 10rpx;
			border-top-left-radius: 10rpx;
			padding: 40rpx 40rpx;

			.title {
				font-size: 28rpx;
			}

			.des {
				margin-top: 20rpx;
				color: #666;
				font-size: 20rpx;
			}

			.buy {
				bottom: 60rpx;
				position: absolute;
				height: 80rpx;
				width: calc(100vw - 80rpx);
				border-radius: 40rpx;
				justify-content: center;
				display: flex;
				align-items: center;
				color: #fff;
				font-size: 30rpx;
				background-color: #0D3846;
			}
		}

	}
</style>